<template>
    <header class="header">
      <h1>todos</h1>
      <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
      <label for="toggle-all"></label>
      <input
        class="new-todo"
        placeholder="输入任务名称-回车确认"
        autofocus
        v-model="task"
        @keydown.enter="down"
      />
    </header>
  </template>
  
  <script>
  export default {
    props:['arr'],
    computed:{
      isAll:{
        set(checked){
          this.arr.forEach(obj => obj.isDone = checked)
        },
        get(){
          return this.arr.every(itms =>itms.isDone)
        }
      }
    },
   data(){
    return{
        task:'',
    }
   },
   methods:{
    down(){
        if(this.task.trim().length ===0) return alert('不能为空')
        this.$emit('creat',this.task)
        this.task = ''
    }
   }
  }
  </script>